<template>
  <div class="container">
    <el-row type="flex" justify="center">
      <el-col :span="24" >
     <el-card class="box-card">
    <div class="top">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="关键字" class="key" v-model="formInline.keyword">
            <el-input
              v-model="formInline.user"
              placeholder="根据文章标题搜索"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm">清除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
         <template>
          <el-button type="success"  icon="el-icon-edit" class="skill" @click="addArticles('add') " >新增技巧</el-button>

         </template>
        </el-form>
      </el-form>
    </div>
    <div class="middle" style="width: 100%;background-color:#f4f4f5;"  icon="el-icon-edit">
      <i class="el-icon-info"></i>
      <span>数据一共{{datalength}}条</span>
    </div>
    <div class="bottom">
      <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="title"
        label="文章标题"
        width="280">
      </el-table-column>
      <el-table-column
        prop="visits"
        label="阅读数"
        width="100">
      </el-table-column>
      <el-table-column
        prop="username"
        label="录入人"
        width="120">
      </el-table-column>
      <el-table-column
        prop="createTime"
        :formatter="formatTime"
        label="录入时间"
        width="260">
      </el-table-column>
      <el-table-column
        prop="name"
        label="状态"
        width="180">
        <template v-slot="{row}">
          <div>{{row.state ===1?'已启用':'已禁用'}}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        :formatter="formatState">
        <template v-slot="{row}">
        <el-button type="text" @click="Preview(row)" >预览</el-button>
        <el-button type="text" @click="Disable(row.id,row.state)">
        <span v-if="row.state">启用</span>
        <span v-else>禁用</span>
        </el-button>
        <el-button type="text" @click="addArticles('edit',row.id,row)" :disabled="row.state===1?true:false">修改</el-button>
        <el-button type="text" @click="delremove(row)" :disabled="row.state===1">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
  <template>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      :current-page="page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="paging">
    </el-pagination>
  </template>
    </div>
    <articlesAddVue ref="addRef" @ADD_SUCCESS="getList" :isAddOrEdit="isAddOrEdit" :type="type" :pid="pid" :id="id"></articlesAddVue>
    <articlesPreview ref="previewRef" :title="title" :createTime="createTime" :creator="username" :reads="visits" :articleBody="articleBody" :id="id" :model="model"/>
  </el-card>
</el-col>
  </el-row>
  </div>

</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/articles.js'
import articlesAddVue from '@/module-hmmm/components/articles-add'
import articlesPreview from '@/module-hmmm/components/articles-preview'

export default {
  components: { articlesAddVue, articlesPreview },
  data () {
    return {
      rules: {},
      ruleForm: {},
      formInline: {
        user: '',
        region: '',
        keyword: '',
        state: null
      },
      tableData: [],
      total: 0,
      page: 1,
      pagesize: 10,
      datalength: '',
      title: '',
      createTime: '',
      username: '',
      visits: 0,
      articleBody: '',
      id: '',
      model: {},
      isAddOrEdit: 'add',
      type: 1,
      pid: '0'

    }
  },
  computed: {
    // 最大页码值
    maxPage () {
      return Math.ceil(this.total / this.pagesize)
    },
    // 每页数据是否刚好填满
    isFullPage () {
      return this.total % this.pagesize === 0
    }

  },
  created () {
    this.getList()
  },
  methods: {
    resetForm () {

    },
    // utc时间转换
    formatTime (row, column) {
      const data = row[column.property]
      const dtime = new Date(data)
      const year = dtime.getFullYear()
      let month = dtime.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let day = dtime.getDate()
      if (day < 10) {
        day = '0' + day
      }
      let hour = dtime.getHours()
      if (hour < 10) {
        hour = '0' + hour
      }
      let minute = dtime.getMinutes()
      if (minute < 10) {
        minute = '0' + minute
      }
      let second = dtime.getSeconds()
      if (second < 10) {
        second = '0' + second
      }
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
    },
    // 获取列表
    async getList () {
      const res = await list({ page: this.page, pagesize: this.pagesize, keyword: this.formInline.keyword, state: this.formInline.state })
      console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
      this.datalength = res.data.counts
    },
    // 修改和增加
    addArticles  (isEdit, pid, row) {
      if (isEdit === 'edit') {
        // this.pid = pid
        this.id = String(row.id)
        console.log(pid, row, this.id)
        this.isAddOrEdit = 'edit'
        this.$refs.addRef.openDialog(row)

        return
      }
      this.isAddOrEdit = 'add'
      this.$refs.addRef.openDialog()
    },
    // 分页
    handleSizeChange (value) {
      this.pagesize = value
      this.getList()
    },
    // 分页
    handleCurrentChange (value) {
      this.page = value
      this.getList()
    },
    // 删除
    async delremove (data) {
      console.log(12)
      const res = await remove(data)
      console.log(res)
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.getList()
    },
    // 预览
    Preview (row) {
      this.$refs.previewRef.openPreviewDialog(row)
    },
    // 禁用
    async Disable (id, state) {
      try {
        state = state ? 0 : 1
        this.tableData.forEach(item => {
          if (item.id === id) {
            item.state = state
          }
        })
        // 发生请求更新当前页面状态更新的请求，根据接口文档来绝对传什么参数，这里是传id和状态state
        await changeState(id, state)
        this.$message.success('操作成功')
      } catch (err) {
        console.log(err)
      }
    },
    // 禁用
    formatState (row, column, cellValue, index) {
      const hireType = [
        {
          id: 1,
          value: '已禁用'
        },
        {
          id: 0,
          value: '已启用'
        }
      ]
      const obj = hireType.find((item) => {
        return item.id === cellValue
      })
      console.log(obj)
    },
    // 搜索
    search () {
      this.getList()
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  // background-color: orange;
  padding: 10px 20px ;
  margin: 10px;
  .top{
    padding: 15px 0 0 0 ;
    .key{
      margin-right: 50px;
      margin-left: 20px;
    }
    .skill{
      margin-left: 360px;
    }
  }
  .middle{
    padding: 10px;
    color: rgb(126, 123, 123);
    margin-bottom: 20px;
    border-radius: 5px;
    span{
      font-size: 12px;
      margin-left: 5px;
    }
  }
  .bottom{
    .paging{
      text-align: right;
    }
  }
}
</style>
